<nz-spin [nzSpinning]="userLoading">

  <div nz-row [nzGutter]="16">
    <div nz-col class="gutter-row" [nzSpan]="14">
      <div class="main">
        <div class="left">
          <form nz-form nzLayout="vertical" #f="ngForm" (submit)="save()" se-container="1">

            <se label="昵称" error="请输入您的昵称!">
              <input nz-input [(ngModel)]="user.nickname" name="nickname" required />
            </se>

            <se label="邮箱" error="请输入您的邮箱!">
              <input nz-input type="email" [(ngModel)]="user.email" name="email" required />
            </se>

            <se label="联系电话" error="请输入您的联系电话!">
              <input nz-input [(ngModel)]="user.phoneNum" name="phoneNum" required />
            </se>

            <se label="个人简介">
          <textarea
            nz-input
            [(ngModel)]="user.memo"
            name="profile"
            [nzAutosize]="{ minRows: 4, maxRows: 10 }"
            placeholder="个人简介"
          ></textarea>
            </se>

            <se>
              <button nz-button nzType="primary" [disabled]="f.invalid">更新基本信息</button>
            </se>
          </form>
        </div>

      </div>
    </div>

    <div nz-col class="gutter-row" [nzSpan]="10">
      <div class="right">
        <div class="avatar_title">头像</div>

        <div class="avatar">
          <nz-avatar [nzSize]="100" nzSrc="{{'api/file/view-picture/' + user.avatarId}}"></nz-avatar>
        </div>
        <nz-upload nzAction="api/file/upload" [nzShowUploadList]="false"
                   (nzChange)="handleChange($event)">
          <button nz-button class="button_view">
            <i nz-icon nzType="upload"></i>
            <span>更换头像</span>
          </button>
        </nz-upload>
      </div>
    </div>
  </div>


</nz-spin>
